<template>
  <div>
    <el-card class="box-card">
      <el-table :data="tableData"
      style="width: 60%">
        <el-table-column
          prop="gno"
          label="商品号"
          width="80">
        </el-table-column>
        <el-table-column
          prop="name"
          label="商品名称"
          width="140">
        </el-table-column>
        <el-table-column
          prop="fno"
          label="厂家编号"
          width="140">
        </el-table-column>
        <el-table-column
          prop="invoice"
          label="库存量"
          width="140">
        </el-table-column>
        <el-table-column
          label="操作"
          width="140">
          <template >
            <el-button type="danger" @click="buyEvent">购买</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="填写邮寄信息" :visible.sync="addBox" width="50%">
        <el-form ref="form" label-width="100px" v-model="addUserData">
          <el-form-item label="收件人：">
            <el-input placeholder="请输入名字" maxlength="50" v-model = "addUserData.recipients"></el-input>
          </el-form-item>
          <el-form-item label="收件地址：">
            <el-input placeholder="请输入地址" maxlength="50" v-model = "addUserData.address"></el-input>
          </el-form-item>
          <el-form-item label="联系电话：">
            <el-input placeholder="请输入联系电话" maxlength="50" v-model = "addUserData.telephone"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleAddUser">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { fetchmessage } from "../api/index"
export default {
  data: function () {
    return {
      tableData: [{
        gno: '1',
        name: '羽毛球',
        invoice: '20',
        fno: '2',
        numbers: '50',
        recipients: '张三',
        address: '北京朝阳区',
        telephone: '18987564852'
      },
      {
        gno: '2',
        name: '乒乓球',
        invoice: '15',
        fno: '3',
        numbers: '45',
        recipients: '李四',
        address: '广州潮汕区',
        telephone: '1656187525'
      },
      {
        gno: '3',
        name: '篮球',
        invoice: '20',
        fno: '3',
        numbers: '100',
        recipients: '王麻子',
        address: '遵义花岗区',
        telephone: '18845924582'
      },
      {
        gno: '4',
        name: '毽子',
        invoice: '60',
        fno: '5',
        numbers: '50',
        recipients: '王三',
        address: '河南郑州',
        telephone: '18945824852'
      },
      {
        gno: '6',
        name: '足球',
        invoice: '20',
        fno: '8',
        numbers: '50',
        recipients: '张亮',
        address: '河北承德',
        telephone: '18984584552'
      },
      {
        gno: '7',
        name: '跑步机',
        invoice: '25',
        fno: '7',
        numbers: '50',
        recipients: '张亮',
        address: '河北承德',
        telephone: '18984584552'
      }
      ],
      addBox: false,
      addUserData: {
        recipients: '',
        address: '',
        telephone: '',
        index: '',
        num: ''
      }
    }
  },
  methods: {
    buyEvent () {
      this.addBox = true
    },
    handleAddUser () {
      this.addUserData = {}
      this.$message({ showClose: true, message: '购买成功', type: 'success' })
    },
    getData() {
      fetchDatamessage(this.query).then(res => {
        console.log(res);
        this.tableData = res.list;
        this.pageTotal = res.pageTotal || 50;
      });
    },
  }
}
</script>

<style scoped>

</style>
